﻿<div id="namelist-input-dialog" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-fullscreen" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <nav class="navbar navbar-expand-lg navbar-light bg-light">
                    <span class="navbar-brand">namelist.input</span>

                    <ul class="navbar-nav">

                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">View</a>
                            <div class="dropdown-menu dropdown-namelist-input-view" aria-labelledby="dropdown-view">
                                <h6 class="dropdown-header">Groups</h6>
                                <a id="view-group-collapse-all" class="dropdown-item dropdown-selected" href="#"><i class="fas fa-check"></i><span class="ml-1">Collapse All</span></a>
                                <a id="view-group-expand-all" class="dropdown-item" href="#"><i class="fas fa-check"></i><span class="ml-1">Expand All</span></a>
                                <a id="view-group-show-unset" class="dropdown-item" href="#"><i class="fas fa-check"></i><span class="ml-1">Show Unset</span></a>
                                <a id="view-group-hide-unset" class="dropdown-item" href="#"><i class="fas fa-check"></i><span class="ml-1">Hide Unset</span></a>
                                <div class="dropdown-divider"></div>
                                <h6 class="dropdown-header">Variables</h6>
                                <a id="view-variables-show-unset" class="dropdown-item" href="#"><i class="fas fa-check"></i><span class="ml-1">Show Unset</span></a>
                                <a id="view-variables-hide-unset" class="dropdown-item" href="#"><i class="fas fa-check"></i><span class="ml-1">Hide Unset</span></a>
                                <div class="dropdown-divider"></div>
                                <h6 class="dropdown-header">Views</h6>
                                <a id="view-all" class="dropdown-item" href="#"><i class="fas fa-check"></i><span class="ml-1">All</span></a>
                                <a id="view-compact" class="dropdown-item" href="#"><i class="fas fa-check"></i><span class="ml-1">Compact</span></a>
                                <a id="view-min" class="dropdown-item" href="#"><i class="fas fa-check"></i><span class="ml-1">Minimized</span></a>
                            </div>
                        </li>

                    </ul>

                    <span class="navbar-text mr-1">Timezone:</span>
                    <form class="form-inline">
                        <select class="selectpicker" aria-label="Timezone" id="select-timezone" data-live-search="true"></select>
                    </form>

                    <span class="navbar-text mr-1 ml-2">Go To:</span>
                    <form class="form-inline">
                        <button class="btn btn-sm btn-outline-secondary" id="go-to-top" type="button" title="Go to Top"><i class="fas fa-angle-double-up"></i></button>
                        <select class="" aria-label="Group" id="go-to-group" data-live-search="true" title="Group"></select>
                        <select class="" aria-label="Group" id="go-to-variable" data-live-search="true" title="Variable"></select>
                    </form>

                </nav>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">

                <ul class="nav nav-tabs" id="namelist-input-dialog-tabs" role="tablist">
                    <li class="nav-item" role="presentation">
                      <button class="nav-link active" id="tab-namelist-input-editor" data-toggle="tab" data-target="#pane-namelist-input-editor" type="button" role="tab" aria-controls="pane-namelist-input-editor" aria-selected="true">Editor</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="tab-namelist-input-text" data-toggle="tab" data-target="#pane-namelist-input-text" type="button" role="tab" aria-controls="pane-namelist-input-text" aria-selected="false">Text</button>
                      </li>
                    <li class="nav-item" role="presentation" style="display: none;">
                      <button class="nav-link" id="tab-namelist-input-errors" data-toggle="tab" data-target="#pane-namelist-input-errors" type="button" role="tab" aria-controls="pane-namelist-input-errors" aria-selected="false">Errors</button>
                    </li>
                    <li class="nav-item" role="presentation" style="display: none;">
                        <button class="nav-link" id="tab-namelist-input-original" data-toggle="tab" data-target="#pane-namelist-input-original" type="button" role="tab" aria-controls="pane-namelist-input-original" aria-selected="false">Original</button>
                      </li>
                      <li class="nav-item" role="presentation">
                        <button class="nav-link" id="tab-namelist-input-info" data-toggle="tab" data-target="#pane-namelist-input-info" type="button" role="tab" aria-controls="pane-namelist-input-info" aria-selected="false">Documentation</button>
                      </li>
                  </ul>
                
                <div class="tab-content" id="namelist-input-dialog-tab-content">
                    <div class="tab-pane fade show active" id="pane-namelist-input-editor" role="tabpanel" aria-labelledby="tab-namelist-input-editor">
                        <div id="namelist-input-container" class="namelist-input-editor"></div>
                    </div>
                    <div class="tab-pane fade" id="pane-namelist-input-text" role="namelist-input-text" aria-labelledby="tab-namelist-input-text">
                        <textarea class="form-control font-namelist resize-none" readonly></textarea>
                    </div>
                    <div class="tab-pane fade" id="pane-namelist-input-errors" role="namelist-input-errors" aria-labelledby="tab-namelist-input-errors">
                        <div class="alert alert-info" role="alert">
                            A list of error(s) encountered while opening a namelist.input file. An error can happen, for example, when the file is not formatted correctly or contains unrecognized variables. To help improve this tool, please, consider reporting false-positives via the project's <a href="https://github.com/JiriRichter/WRFDomainWizard/issues" target="_blank">issues on GitHub</a>.
                        </div>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <i class="fas fa-exclamation-circle text-danger"></i>
                                <span class="ml-1">Error</span>
                            </li>
                          </ul>
                    </div>
                    <div class="tab-pane fade" id="pane-namelist-input-original" role="namelist-input-original" aria-labelledby="tab-namelist-input-original">
                        <textarea class="form-control font-namelist resize-none" readonly></textarea>
                    </div>
                    <div class="tab-pane fade" id="pane-namelist-input-info" role="namelist-input-info" aria-labelledby="tab-namelist-input-info">
                        <div class="container">
                            <div class="my-2">
                                <h5>WRF Users Guide</h5>
                                <div class="list-group">
                                    <a href="https://www2.mmm.ucar.edu/wrf/users/wrf_users_guide/build/html/namelist_variables.html" class="list-group-item list-group-item-action" target="_blank">Namelist Variables</a>
                                </div>
                            </div>
                            <div class="my-2">
                                <h5>GitHub: wrf-model/WRF</h5>
                                <div class="list-group">
                                    <a href="https://github.com/wrf-model/WRF/tree/master/Registry" class="list-group-item list-group-item-action" target="_blank">Registry files</a>
                                    <a href="https://github.com/wrf-model/WRF/blob/master/run/README.namelist" class="list-group-item list-group-item-action" target="_blank">run/README.namelist</a>
                                    <a href="https://github.com/wrf-model/WRF/blob/master/test/em_real/examples.namelist" class="list-group-item list-group-item-action" target="_blank">test/em_real/examples.namelist</a>
                                </div>
                            </div>
                          </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button id="button-save" type="button" class="btn btn-primary btn-sm"><i class="far fa-save"></i><span class="ml-1">Save</span></button>
                <button id="button-copy" type="button" class="btn btn-primary btn-sm"><i class="fas fa-copy"></i><span class="ml-1">Copy</span></button>
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>